<div class="floors" ms-controller="floor">

    <a style="margin-left: 10px;" href="javascript:;" class="btn" ms-click="add_floor(1)">楼层样式1</a>
    <a style="margin-left: 10px;" href="javascript:;" class="btn" ms-click="add_floor(2)">楼层样式2</a>
    <a style="margin-left: 10px;" href="javascript:;" class="btn" ms-click="add_floor(3)">楼层样式3</a>
    <a style="margin-left: 10px;" href="javascript:;" class="btn" ms-click="add_floor(4)">楼层样式4</a>


    <div class="floor_box" id="floor_box">
        <div class="head">
            <a href="#floor_box" ms-repeat="items" ms-click="toggle($index)" ms-class="selected : el.show == 1">{{$index + 1}}楼</a>
        </div>
        
        <div class="floor" ms-repeat="items" ms-visible="el.show == 1">
            <div>
                <a href="javascript:;" class="btn remove" ms-click="$remove" >删除</a>
            </div>
            <div class="head">
                <span>
                    楼层名字：
                    <input type="text" ms-duplex="el.floor_name">
                </span>

                <span>
                查看全部链接：
                    <input type="text" ms-duplex="el.all_link">
                </span>

                <span>
                小链接(以半角逗号分开）：
                    <input type="text" ms-duplex="el.short_link">
                </span>
            </div>

            <section ms-if="el.style == 1" class="floor_type1">

                <br>

                <p>
                    请填写要展示的商品ID，可在商品管理中的“平台货号”查看
                </p>
                <br>

                <span>
                    商品1：<input type="text" ms-duplex="el.g1">
                </span>
                <span>
                    商品2：<input type="text" ms-duplex="el.g2">
                </span>
                <span>
                    商品3：<input type="text" ms-duplex="el.g3">
                </span>
                <span>
                    商品4：<input type="text" ms-duplex="el.g4">
                </span>
            </section>

            <section ms-if="el.style == 2" class="floor_type2">


                <div>
                    <img style="width: 375px;height: 100px;" src="/data/upload/shop/common/default_goods_image.gif"
                         ms-attr-link="el.img1.link"
                         ms-attr-src="el.img1.pic"
                         alt="">
                    <img style="width: 375px;height: 100px;" src="/data/upload/shop/common/default_goods_image.gif"
                         ms-attr-link="el.img2.link"
                         ms-attr-src="el.img2.pic"
                         alt="">
                </div>
                <div class="">
                    <img style="width: 250px;height: 100px;" src="/data/upload/shop/common/default_goods_image.gif"
                         ms-attr-link="el.img3.link"
                         ms-attr-src="el.img3.pic"
                         alt="">
                    <img style="width: 250px;height: 100px;" src="/data/upload/shop/common/default_goods_image.gif"
                         ms-attr-link="el.img4.link"
                         ms-attr-src="el.img4.pic"
                         alt="">
                    <img style="width: 250px;height: 100px;" src="/data/upload/shop/common/default_goods_image.gif"
                         ms-attr-link="el.img5.link"
                         ms-attr-src="el.img5.pic"
                         alt="">
                </div>

            </section>

            <section ms-if="el.style == 3" class="floor_type3">
                <table>
                    <tr>
                       <td rowspan="2">
                           <img src="/data/upload/shop/common/default_goods_image.gif" alt="" style="width: 200px;height: 400px;"
                                ms-attr-link="el.img.link"
                                ms-attr-src="el.img.pic"
                           >
                       </td>
                        <td>
                            商品1：<input type="text" ms-duplex="el.g1">
                        </td>
                        <td>
                            商品2：<input type="text" ms-duplex="el.g2">
                        </td>
                        <td>
                            商品3：<input type="text" ms-duplex="el.g3">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            商品4：<input type="text" ms-duplex="el.g4">
                        </td>
                        <td>
                            商品5：<input type="text" ms-duplex="el.g5">
                        </td>
                        <td>
                            商品6：<input type="text" ms-duplex="el.g6">
                        </td>
                    </tr>
                </table>

            </section>
            <section ms-if="el.style == 4" class="floor_type4" style="overflow: hidden;">
                <a href="javascript:;" ms-click="add_4_goods(el.goods)" class="btn">添加商品</a>
                <ul>
                    <li ms-repeat-goods="el.goods" style="width: 25%;float: left;margin-bottom: 10px;">
                        <input type="text" ms-duplex="goods">
                        <a href="javscript:;" class="btn" ms-click="$remove">删除</a>
                    </li>
                </ul>
            </section>
        </div>
    </div>
</div>

<style>
    .floor_box{
        position: relative;
    }
    .floor_box .remove{
        position: absolute;
        top: 0;
        right: 0;
    }
    .floor {
        margin-top: 10px;
        padding: 20px;
        width: 800px;
    }

    .floor .head{
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .floor section {
    }
    .floor span{
        margin-right: 10px;
    }
</style>
<style>
    .floor{
        display: none;
    }
    .show{
        display: block;
    }
    .head a{
        display: inline-block;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 30px;
    }
    .head a.selected{
        background: #f60;
        color: #fff;
    }
    .floor_box{
        border : 1px solid #ddd;
        margin-top: 10px;
    }
</style>
<?php
if (!is_array($items)) {
    $items = array();
}
?>
<script>
    var floors = avalon.define({
        $id: 'floor',
        floor_type: '',
        items: [],
        toggle : function (index) {
            for(var i = 0; i < floors.items.length; i++) {
                if(i == index){
                    floors.items[i].show = 1;
                }
                else{
                    floors.items[i].show = 0
                }
            }
        },
        add_floor: function (floor) {
            var obj = {
                style : floor,
                floor_name : '',
                all_link : '',
                short_link : '',
                show : 0
            };

            if (floor == 1) {
                obj.g1 = '';
                obj.g2 = '';
                obj.g3 = '';
                obj.g4 = '';
                floors.items.push(obj);
            }
            else if (floor == 2) {
                for(var $i = 1; $i <= 5; $i++) {
                    obj['img' + $i] = {
                        pic : '/data/upload/shop/common/default_goods_image.gif',
                        link : ''
                    }
                }
                floors.items.push(obj);
            }
            else if(floor == 3){
                obj.g1 = ''
                obj.g2 = ''
                obj.g3 = ''
                obj.g4 = ''
                obj.g5 = ''
                obj.g6 = ''
                obj.img = {
                    pic : '/data/upload/shop/common/default_goods_image.gif',
                    link : ''
                }
                floors.items.push(obj)
            }
            else if (floor == 4) {
                obj.goods = []
                floors.items.push(obj);
            }
        },

        add_4_goods : function(item) {
            item.push('');
        }

    });

    var items = <?php echo json_encode($items);?>;
    for(var i = 0; i < items.length; i++) {
        floors.items.push(items[i]);
    }

    console.log(floors.$model);
</script>
<style>
    .page{
    }
</style>
<?php

?>